<template>
  <div class="list">
    <h5>消息</h5>
    <span>
      <van-icon name="delete-o" />
      清除未读
    </span>
    <div class="tongzhi">
      <van-notice-bar color="#fff" background="#FA6205" mode="closeable" scrollable
        text="下载山羊app,听取草原般自由的声音,山羊听书,自由听书~~~"></van-notice-bar>
    </div>
    <div class="lis">
      <ul>
        <li>
          <img src="../assets/img/喜欢_like.png" alt="">
        </li>
        <li>
          <img src="../assets/img/添加人群_people-plus-one.png" alt="">
        </li>
        <li>
          <img src="../assets/img/评论_comments.png" alt="">
        </li>
      </ul>
    </div>
    <div class="list">
      <ul>
        <li>
          赞和收藏
        </li>
        <li>
          新增关注
        </li>
        <li>
          评论和@
        </li>
      </ul>
    </div>

    <div class="foot">

      <van-cell-group>
        <!-- <van-cell title="单元格" value="内容" /> -->
        <van-cell title="09-26"  value="" label="系统提示：新书专辑已上架,快去听取吧！！" />
      </van-cell-group>
      <van-cell-group>
        <!-- <van-cell title="单元格" value="内容" /> -->
        <van-cell title="09-25" value="" label="您的好友在评论中@了你，快去查看！" />
      </van-cell-group>
      <van-cell-group>
        <!-- <van-cell title="单元格" value="内容" /> -->
        <van-cell title="09-15" value="" label="大熊：  你推荐的小说内容听着确实不错" />
      </van-cell-group>
      <van-cell-group>
        <!-- <van-cell title="单元格" value="内容" /> -->
        <van-cell title="2023-04-14" value="" label="小白：  wuwuwuuwuw汪汪汪汪汪~~~~~~~" />
      </van-cell-group>
      <van-cell-group>
        <!-- <van-cell title="单元格" value="内容" /> -->
        <van-cell title="2022-05-03" value="" label="哆啦A梦:  我要坐时光机远游去了,记得等我听山羊听书" />
      </van-cell-group>
    </div>
  </div>
</template>
<style lang="less" scoped>
.list {
  position: relative;

  h5 {
    padding-left: 175px;
    padding-top: 7px;
  }

  span {
    position: absolute;
    font-size: 15px;
    font-family: a;
    // font-weight: bold;
    top: 20px;
    right: 15px;
  }

  .tongzhi {
    padding-top: 10px;
  }

  .lis {
    ul {
      display: flex;
      justify-content: space-evenly;
      padding-top: 10px;
      li {
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }

  .list {
    ul {
      padding-left: 5px;
      display: flex;
      justify-content: space-evenly;

      li {
        font-size: 15px;
      }
    }
  }

  .foot {
    padding-top: 20px;
  }
}
</style>